<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="雷达选择" prop="radar">
        <el-select v-model="selectedRadar" placeholder="请选择雷达" @change="handleRadarChange">
          <el-option
            v-for="radar in radarOptions"
            :key="radar.value"
            :label="radar.label"
            :value="radar.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模式选择" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择模式">
          <el-option label="PPI模式" value="PPI" />
          <!-- <el-option label="DBS模式" value="DBS" /> -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="用户名称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>-->
       <el-form-item label="时间" prop="timeParam">
         <TimeSelector
           v-model="queryParams.timeParam"
           :show-pagination="true"
           :default-page-size="20"
           :city="selectedCity"
           placeholder="请选择时间"
           width="260px"
           @change="handleTimeChange"
           @load-complete="handleTimeLoadComplete"
           ref="timeSelectorRef"
         />
       </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
        <el-button type="warning" icon="download" @click="handleExportPPI" :disabled="!queryParams.type || !queryParams.timeParam">导出</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['system:logininfor:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 统计信息行 -->
    <el-row :gutter="20" class="mb8 statistics-row" v-if="list.length > 0">
      <el-col :span="6">
        <div class="statistics-item">
          <span class="statistics-label">最大风速：</span>
          <span class="statistics-value">{{ statistics.maxWindSpeed?statistics.maxWindSpeed: '--' }}</span>
          <span class="statistics-unit">m/s</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics-item">
          <span class="statistics-label">最小风速：</span>
          <span class="statistics-value">{{ statistics.minWindSpeed?statistics.minWindSpeed: '--' }}</span>
          <span class="statistics-unit">m/s</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics-item">
          <span class="statistics-label">平均风速：</span>
          <span class="statistics-value">{{ statistics.avgWindSpeed?statistics.avgWindSpeed.toFixed(2): '--' }}</span>
          <span class="statistics-unit">m/s</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="statistics-item">
          <span class="statistics-label">主要风向：</span>
          <span class="statistics-value">{{ statistics.mainWindDirection }}</span>
          <span class="statistics-unit">°</span>
        </div>
      </el-col>
    </el-row>

    <div class="table-wrapper">
      <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange" size="small" :max-height="tableMaxHeight">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="100" />
        <!-- <el-table-column label="ID" align="center" prop="id" width="80" /> -->
        <el-table-column label="数据来源表" align="center" prop="sourceTable" min-width="200" />
        
        <!-- DBS模式显示的列 -->
        <template v-if="queryParams.type === 'DBS'">
          <el-table-column label="高度" align="center" prop="height" />
          <el-table-column label="风向" align="center" prop="windDirection" />
          <el-table-column label="风速" align="center" prop="windSpeed" />
          <el-table-column label="垂直风速" align="center" prop="verticalSpeed" />
        </template>
        
        <!-- PPI模式显示的列 -->
        <template v-if="queryParams.type === 'PPI'">
          <el-table-column label="X坐标" align="center" prop="xCoordinate" />
          <el-table-column label="Y坐标" align="center" prop="yCoordinate" />
          <el-table-column label="风速" align="center" prop="windSpeed" />
          <el-table-column label="风向" align="center" prop="windDirection" />
        </template>
        
        <!-- <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button type="danger" text plain icon="delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 导出数据弹窗 -->
    <el-dialog
      v-model="exportDialogVisible"
      title="选择导出数据"
      width="900px"
      :close-on-click-modal="false"
    >
      <!-- 时间范围筛选 -->
      <el-form :model="exportQuery" :inline="true" class="export-filter-form">
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="exportQuery.beginTime"
            type="datetime"
            placeholder="选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 200px"
            @change="handleExportTimeChange"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="exportQuery.endTime"
            type="datetime"
            placeholder="选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 200px"
            @change="handleExportTimeChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleExportQuery">查询</el-button>
          <el-button icon="refresh" @click="handleExportReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="exportLoading"
        :data="exportList"
        border
        size="small"
        @selection-change="handleExportSelectionChange"
        max-height="420"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="80" />
        <!-- 动态渲染列，适配任意表结构 -->
        <el-table-column prop="datePrefix" label="日期" :min-width="120"  show-overflow-tooltip/>
        <el-table-column prop="tableName" label="表名" :min-width="120"  show-overflow-tooltip/>
        <el-table-column prop="type" label="类型" :min-width="120"  show-overflow-tooltip/>
        <el-table-column prop="syncTime" label="创建日期" :min-width="120"  show-overflow-tooltip/>

      </el-table>

      <div class="export-pagination-wrapper">
        <pagination
          v-show="exportTotal > 0"
          :total="exportTotal"
          v-model:page="exportQuery.pageNum"
          v-model:limit="exportQuery.pageSize"
          @pagination="getExportList"
        />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleExportConfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="logininfor">
import { onMounted, onBeforeUnmount, computed } from 'vue'
import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
import { showTime } from '@/utils'
import { saveAs } from 'file-saver'
import { blobValidate } from '@/utils/ruoyi'
import {
  tableQuery,
  windDataDBS,
  windDataPPI,
  historyList,
  exportDataPPI,
  getTableList
} from '@/api/system/user'
import TimeSelector from '@/components/TimeSelector/index.vue'
// 遮罩层
const loading = ref(false)
// 选中数组
const ids = ref([])
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 表格数据
const list = ref([])
// 状态数据字典
const statusOptions = ref([])
// 时间选项数据
const timeOptions = ref([])
// 日期范围
const dateRange = ref([])
// 雷达选择
const selectedRadar = ref('32.390648,117.050972') // 默认合肥站
// 雷达选项配置，包含坐标和对应的城市代码
const radarOptions = ref([
  { label: '合肥站', value: '32.390648,117.050972', city: 'hefei' },
  { label: '宣城站', value: '30.851,119.009', city: 'xuancheng' },
])
// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 100,
  type: 'PPI',
  city: 'hefei', // 默认合肥，根据雷达选择动态更新
  timeParam: undefined,
  ipaddr: undefined,
  userName: undefined,
  status: undefined
})
const state = reactive({
  statistics: {
      maxWindSpeed: '--',
      minWindSpeed: '--',
      avgWindSpeed: '--',
      mainWindDirection: '--'
    }
})
const { statistics } = toRefs(state)
const { proxy } = getCurrentInstance()

// 根据 selectedRadar 计算对应的城市
const selectedCity = computed(() => {
  const currentRadar = radarOptions.value.find(r => r.value === selectedRadar.value)
  return currentRadar?.city || ''
})



// 计算表格最大高度（响应式）
const tableMaxHeight = ref(600)
let resizeHandler = null

// 导出弹窗相关状态
const exportDialogVisible = ref(false)
const exportLoading = ref(false)
const exportList = ref([])
const exportTotal = ref(0)
const exportQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  // 这里可以根据需要追加筛选条件，例如表名、时间等
  timeParam: undefined,
  city: undefined,
  beginTime: undefined,
  endTime: undefined,
})
const exportSelection = ref([])

// 动态列：根据接口返回的第一条数据的字段自动生成
const exportColumns = computed(() => {
  if (!exportList.value || exportList.value.length === 0) return []
  return Object.keys(exportList.value[0] || {}).filter(key => key !== 'id')
})

/** 获取时间选项数据 */
async function getTimeOptions() {
  try {
    const response = await tableQuery(queryParams)
    if (response.code === 200) {
      timeOptions.value = response.data.result || []
      // 如果有数据且当前没有选择时间，自动选择第一个
      if (timeOptions.value.length > 0 && !queryParams.timeParam) {
        queryParams.timeParam = timeOptions.value[0].dateTimeString
        // 自动选择第一个时间后，获取对应的数据
        getList()
      }
    }
  } catch (error) {
    console.error('获取时间选项失败:', error)
    timeOptions.value = []
  }
}

/** 查询数据列表 */
async function getList() {
  if (!queryParams.type || !queryParams.timeParam) {
    console.warn('请选择模式和时间')
    return
  }
  
  loading.value = true
  
  try {
    const params = {
      timeParam: queryParams.timeParam,
      city: queryParams.city, // 添加城市参数
      pageNum: queryParams.pageNum,
      pageSize:20
    }
    
    let response
    if (queryParams.type === 'DBS') {
      response = await windDataDBS(params)
    } else if (queryParams.type === 'PPI') {
      response = await historyList(params)
    } else {
      throw new Error('不支持的模式类型')
    }
    
    if (response.code === 200) {
      // 处理返回的数据，确保字段名正确映射
      const rawData = response.data.result || []
      state.statistics = response.data.extra
      list.value = rawData.map(item => ({
        id: item.id,
        sourceTable: item.sourceTable,
        // DBS模式字段
        height: item.height,
        windDirection: item.windDirection,
        windSpeed: item.windSpeed,
        time:item.time,
        verticalSpeed: item.verticalSpeed,
        // PPI模式字段
        xCoordinate: item.xCoordinate,
        yCoordinate: item.yCoordinate
      }))
      total.value = response.data.totalNum || 0
    } else {
      list.value = []
      total.value = 0
      proxy.$modal.msgError(response.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    list.value = []
    total.value = 0
    proxy.$modal.msgError('获取数据失败')
  } finally {
    loading.value = false
  }
}

/** 获取导出弹窗中的表数据（从 getTableList 接口） */
async function getExportList() {
  if (!queryParams.timeParam) {
    proxy.$modal.msgWarning('请先选择时间')
    return
  }

  exportLoading.value = true
  try {
    const params = {
      ...exportQuery,
      // 携带与当前页面一致的筛选条件，按需调整
      timeParam: queryParams.timeParam,
      city: queryParams.city,
      // beginTime 和 endTime 已通过 ...exportQuery 包含在内
    }
    const response = await getTableList(params)
    if (response.code === 200) {
      // 兼容不同的返回结构
      const data = response.data || {}
      exportList.value = data.result || data.rows || data.list || []
      exportTotal.value = data.totalNum || data.total || exportList.value.length || 0
    } else {
      exportList.value = []
      exportTotal.value = 0
      proxy.$modal.msgError(response.msg || '获取导出数据失败')
    }
  } catch (error) {
    console.error('获取导出数据失败:', error)
    exportList.value = []
    exportTotal.value = 0
    proxy.$modal.msgError('获取导出数据失败')
  } finally {
    exportLoading.value = false
  }
}

// 导出弹窗时间变化处理
function handleExportTimeChange() {
  // 时间变化时可以选择自动查询，或者等待用户点击查询按钮
  // 这里不自动查询，让用户主动点击查询按钮
}

// 导出弹窗查询
function handleExportQuery() {
  // 验证时间范围
  if (exportQuery.beginTime && exportQuery.endTime) {
    if (new Date(exportQuery.beginTime) > new Date(exportQuery.endTime)) {
      proxy.$modal.msgWarning('开始时间不能大于结束时间')
      return
    }
  }
  exportQuery.pageNum = 1
  getExportList()
}

// 导出弹窗重置
function handleExportReset() {
  exportQuery.beginTime = undefined
  exportQuery.endTime = undefined
  exportQuery.pageNum = 1
  getExportList()
}

// 导出弹窗多选变更
function handleExportSelectionChange(selection) {
  exportSelection.value = selection
}

// 导出弹窗确认导出
async function handleExportConfirm() {
  if (!exportSelection.value.length) {
    proxy.$modal.msgWarning('请至少选择一条要导出的数据')
    return
  }

  try {
    loading.value = true
    // 显示导出中的提示框
    proxy.$modal.loading('正在导出中，请稍等....')
    
    // 按勾选的每一行循环导出
    for (const row of exportSelection.value) {
      const params = {
        timeParam: row.datePrefix,
        city: queryParams.city,
        // 根据实际后端需要，携带当前选中行的标识信息
        pageNum: exportQuery.pageNum,
        pageSize:exportQuery.pageSize
      }

      const response = await exportDataPPI(params)

      // 验证响应是否为有效的blob
      const isValidBlob = await blobValidate(response.data)
      if (isValidBlob) {
        // 尝试从响应头获取文件名，如果响应头没有则使用当前表名
        let fileName = `${queryParams.city}${row.tableName || row.datePrefix || queryParams.timeParam}_PPI数据导出.xlsx`
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
          const result = patt.exec(decodeURI(contentDisposition))
          if (result && result[1]) {
            fileName = result[1].replace(/\"/g, '')
          }
        }

        // 创建blob并下载（Blob对象是不可变的，可以重复使用）
        const blob = new Blob([response.data])
        saveAs(blob, fileName)
      } else {
        const resText = await response.data.text()
        const rspObj = JSON.parse(resText)
        proxy.$modal.msgError(rspObj.msg || '导出失败')
      }
    }

    // 关闭导出中的提示框
    proxy.$modal.closeLoading()
    
    proxy.$modal.msgSuccess('已完成所选数据导出')
    exportDialogVisible.value = false
  } catch (error) {
    // 关闭导出中的提示框
    proxy.$modal.closeLoading()
    console.error('导出失败:', error)
    if (error.response && error.response.data && error.response.data instanceof Blob) {
      try {
        const resText = await error.response.data.text()
        const rspObj = JSON.parse(resText)
        proxy.$modal.msgError(rspObj.msg || '导出失败')
      } catch (parseError) {
        proxy.$modal.msgError('导出失败，请稍后重试')
      }
    } else {
      proxy.$modal.msgError(error.message || '导出失败，请稍后重试')
    }
  } finally {
    // 确保关闭导出中的提示框
    proxy.$modal.closeLoading()
    loading.value = false
  }
}
// 登录状态字典翻译
function statusFormat(row, column) {
  return proxy.selectDictLabel(statusOptions.value, row.status)
}

// TimeSelector 事件处理函数
const timeSelectorRef = ref()

// 处理时间选择变化
const handleTimeChange = (value) => {
  console.log('时间选择变化:', value)
  // 时间改变时重新获取数据
  if (value && queryParams.type) {
    getList()
  }
}

// 处理时间数据加载完成
const handleTimeLoadComplete = (timeOptions) => {
  console.log('时间数据加载完成，共', timeOptions.length, '个选项')
  // 可以在这里添加额外的处理逻辑
}

// 监听模式选择变化
watch(() => queryParams.type, (newType) => {
  if (newType) {
    // 清空当前时间选择
    queryParams.timeParam = undefined
    // TimeSelector 会自动重新加载数据
    if (timeSelectorRef.value) {
      timeSelectorRef.value.refresh()
    }
  }
}, { immediate: true })

// 监听时间选择变化（已由 handleTimeChange 处理，这里可以移除或保留作为备用）
// watch(() => queryParams.timeParam, (newTimeParam) => {
//   if (newTimeParam && queryParams.type) {
//     // 时间改变时重新获取数据
//     getList()
//   }
// })

// 监听城市变化，重新获取时间选项和数据
watch(() => queryParams.city, (newCity) => {
  if (newCity && queryParams.type) {
    // 城市改变时，清空当前时间选择，重新获取时间选项
    queryParams.timeParam = undefined
    // TimeSelector 会自动重新加载数据
    if (timeSelectorRef.value) {
      timeSelectorRef.value.refresh()
    }
  }
})

// 监听本地雷达选择变化
watch(selectedRadar, (newValue) => {
  handleRadarChange(newValue)
})

// 处理雷达选择变化（本地选择）
function handleRadarChange(value) {
  const currentRadar = radarOptions.value.find(r => r.value === value)
  if (currentRadar && currentRadar.city) {
    queryParams.city = currentRadar.city
    console.log('雷达选择变化，城市更新为:', currentRadar.city)
  }
}

// 处理雷达选择事件（来自 DeviceStatus 组件）
function handleRadarSelected(event) {
  const { city } = event.detail
  if (city && (city === 'hefei' || city === 'xuancheng')) {
    queryParams.city = city
    // 同步更新本地选择的雷达
    const radar = radarOptions.value.find(r => r.city === city)
    if (radar) {
      selectedRadar.value = radar.value
    }
    console.log('雷达选择变化（来自DeviceStatus），城市更新为:', city)
  }
}

// 组件挂载时监听雷达选择事件和窗口大小变化
onMounted(() => {
  // 监听雷达选择事件（来自 DeviceStatus 组件）
  window.addEventListener('radar-selected', handleRadarSelected)
  
  // 初始化：根据默认选择的雷达设置城市
  handleRadarChange(selectedRadar.value)
  
  // 监听窗口大小变化，动态调整表格高度
  resizeHandler = () => {
    // 根据视口高度动态计算，减去搜索表单、统计信息、分页等的高度
    // 大约预留：搜索表单200px + 统计信息80px + 分页60px + 其他边距80px = 420px
    tableMaxHeight.value = window.innerHeight - 420
  }
  resizeHandler() // 初始化一次
  window.addEventListener('resize', resizeHandler)
})

// 组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('radar-selected', handleRadarSelected)
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler)
  }
})

proxy.getDicts('sys_common_status').then((response) => {
  statusOptions.value = response.data
})

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = []
  proxy.resetForm('queryForm')
  
  // 重置时间选择器
  if (timeSelectorRef.value) {
    timeSelectorRef.value.clearTimeFilter()
  }
  
  // 重置后重新获取时间选项（TimeSelector 会自动加载）
  handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.infoId)
  multiple.value = !selection.length
}
/** 删除按钮操作 */
function handleDelete(row) {
  const infoIds = row.infoId || ids.value
  proxy
    .$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return delLogininfor(infoIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
}
/** 清空按钮操作 */
function handleClean() {
  proxy
    .$confirm('是否确认清空所有登录日志数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return cleanLogininfor()
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('清空成功')
    })
}
/** 导出按钮操作 */
function handleExport() {
  proxy
    .$confirm('是否确认导出所有操作日志数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      return exportLogininfor(queryParams)
    })
    .then((response) => {
      proxy.download(response.data.path)
    })
}
/** 导出PPI数据按钮操作 */
async function handleExportPPI() {
  if (!queryParams.type || !queryParams.timeParam) {
    proxy.$modal.msgWarning('请先选择模式和时间')
    return
  }
  
  if (queryParams.type !== 'PPI') {
    proxy.$modal.msgWarning('当前仅支持PPI模式数据导出')
    return
  }

  // 打开导出弹窗，并加载列表数据（从 getTableList 接口）
  exportDialogVisible.value = true
  exportQuery.pageNum = 1
  exportQuery.pageSize = 10
  exportQuery.timeParam = queryParams.timeParam
  exportQuery.city = queryParams.city
  // 重置时间筛选条件
  exportQuery.beginTime = undefined
  exportQuery.endTime = undefined
  exportSelection.value = []
  await getExportList()
}
</script>

<style scoped lang="scss">
.statistics-row {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 16px;
  
  .statistics-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    .statistics-label {
      font-size: 14px;
      color: #606266;
      margin-right: 8px;
      font-weight: 500;
    }
    
    .statistics-value {
      font-size: 18px;
      color: #409eff;
      font-weight: 600;
      margin-right: 4px;
    }
    
    .statistics-unit {
      font-size: 12px;
      color: #909399;
    }
  }
}

.table-wrapper {
  margin-bottom: 16px;
}

.export-filter-form {
  margin-bottom: 16px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.export-pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  .el-table__row {
    height: 40px;
  }
  
  .el-table__cell {
    padding: 6px 8px;
  }
  
  .el-table__header {
    th {
      height: 40px;
      padding: 6px 8px;
    }
  }
}

// TimeSelector 组件样式 - 与 Element UI 默认样式保持一致
:deep(.time-selector) {
  .el-button {
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    color: #606266 !important;
    border-radius: 6px;
    
    &:hover {
      background: #ecf5ff !important;
      border-color: #c6e2ff !important;
      color: #409eff !important;
    }
    
    &:focus {
      background: #ecf5ff !important;
      border-color: #c6e2ff !important;
      color: #409eff !important;
    }
    
    &.is-active {
      background: #409eff !important;
      border-color: #409eff !important;
      color: #ffffff !important;
    }
  }
  
  .el-input__wrapper {
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 6px;
    
    &:hover {
      border-color: #c0c4cc !important;
    }
    
    &.is-focus {
      border-color: #409eff !important;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
    }
    
    .el-input__inner {
      color: #606266 !important;
      
      &::placeholder {
        color: #c0c4cc !important;
      }
    }
    
    .el-input__suffix {
      .el-input__suffix-inner {
        color: #c0c4cc !important;
      }
    }
  }
}
</style>
